<template>
  <div class="center-screen" v-if="isShowTopText">
    <span class="icon-left"><el-icon :size="30">
        <Promotion />
      </el-icon></span>
    <div class="scrolling-box">
      <div class="scrolling-content">
        <p>{{ textContent[textContent.length - 1] }}</p>
      </div>
    </div>
    <span class="icon-right"><el-icon @click="closeScrollingBox" :size="30">
        <CloseBold />
      </el-icon></span>
  </div>
</template>

<script setup>
import { usePiniaStore } from '../../../../stores/pinia';
import { storeToRefs } from "pinia";
const piniaStore = usePiniaStore()
const { textContent } = storeToRefs(piniaStore);
const { isShowTopText } = storeToRefs(piniaStore);
function closeScrollingBox() {
  isShowTopText.value = !isShowTopText.value
}
</script>
<style scoped>
.center-screen {
  display: flex;
  height: 35px;
  background-color: #185fb5;
  position: relative;
  width: 700px;
  margin-top: 88px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  opacity: 0.77;
  box-shadow: 0 0 10px 5px rgba(5, 113, 245, 0.65);
  transition: box-shadow 0.3s ease-in-out;
}

.center-screen:hover {
  box-shadow: 0 0 20px 10px rgba(18, 99, 198, 0.8);
}

.scrolling-box {
  height: 100%;
  width: 91%;
  display: flex;
  position: relative;
  align-items: center;
  background-color: #185fb5;
  border-radius: 10px;
  padding: 0px;
  opacity: 0.77;
}

.scrolling-content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scrolling-content p {
  display: inline-block;
  /* 将文本视为内联块元素以实现横向滚动 */
  margin: 0;
  animation: scrollText 15s linear infinite;
  /* 定义动画 */
  color: white;
}

@keyframes scrollText {
  0% {
    transform: translateX(670px);
    /* 从右侧向左滚动 */
  }

  100% {
    transform: translateX(-670px);
    /* 滚动到左侧，相当于重置 */
  }
}

.icon-left,
.icon-right {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
}</style>


